<!DOCTYPE html>
<html lang="en" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">
	<head>
	<meta charset="utf-8"/>
	<title>Pines Notify</title>
	<meta name="HandheldFriendly" content="true" />

	<!-- Dev Notice -->

	<!-- jQuery -->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
    
	<!-- jQuery UI -->
	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css" media="all" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js"></script>

	<!-- Bootstrap -->
	<link href="includes/bootstrap/css/bootstrap.css" id="bootstrap-css" rel="stylesheet" type="text/css" />
	<link href="includes/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="includes/bootstrap/js/bootstrap.min.js"></script>

	
	<!-- Pines Notify -->
	<script type="text/javascript" src="jquery.pnotify.js"></script>
	<link href="jquery.pnotify.default.css" rel="stylesheet" type="text/css" />
	<link href="jquery.pnotify.default.icons.css" rel="stylesheet" type="text/css" />


	
	
	</head>
	<body id="page" data-spy="scroll">
<div id="switcher-container">
      <div id="switcher-bootstrap">
    <div class="btn-group"> <a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"> Theme: <span id="bootstrap-current">Normal</span> <span class="caret"></span> </a>
          <ul class="dropdown-menu pull-right">
        <li><a href="javascript:void(0);" onclick="$('#bootstrap-current').text('Normal'); $('#bootstrap-css').attr('href', 'includes/bootstrap/css/bootstrap.css');">Normal</a></li>
        <li class="divider"></li>
        <li><a href="javascript:void(0);" onclick="$('#bootstrap-current').text('Amelia'); $('#bootstrap-css').attr('href', 'includes/bootstrap/css/bootstrap.amelia.css');">Amelia</a></li>
        <li><a href="javascript:void(0);" onclick="$('#bootstrap-current').text('Cerulean'); $('#bootstrap-css').attr('href', 'includes/bootstrap/css/bootstrap.cerulean.css');">Cerulean</a></li>
        <li><a href="javascript:void(0);" onclick="$('#bootstrap-current').text('Cyborg'); $('#bootstrap-css').attr('href', 'includes/bootstrap/css/bootstrap.cyborg.css');">Cyborg</a></li>
        <li><a href="javascript:void(0);" onclick="$('#bootstrap-current').text('Journal'); $('#bootstrap-css').attr('href', 'includes/bootstrap/css/bootstrap.journal.css');">Journal</a></li>
        <li><a href="javascript:void(0);" onclick="$('#bootstrap-current').text('Readable'); $('#bootstrap-css').attr('href', 'includes/bootstrap/css/bootstrap.readable.css');">Readable</a></li>
        <li><a href="javascript:void(0);" onclick="$('#bootstrap-current').text('Simplex'); $('#bootstrap-css').attr('href', 'includes/bootstrap/css/bootstrap.simplex.css');">Simplex</a></li>
        <li><a href="javascript:void(0);" onclick="$('#bootstrap-current').text('Slate'); $('#bootstrap-css').attr('href', 'includes/bootstrap/css/bootstrap.slate.css');">Slate</a></li>
        <li><a href="javascript:void(0);" onclick="$('#bootstrap-current').text('Spacelab'); $('#bootstrap-css').attr('href', 'includes/bootstrap/css/bootstrap.spacelab.css');">Spacelab</a></li>
        <li><a href="javascript:void(0);" onclick="$('#bootstrap-current').text('Spruce'); $('#bootstrap-css').attr('href', 'includes/bootstrap/css/bootstrap.spruce.css');">Spruce</a></li>
        <li><a href="javascript:void(0);" onclick="$('#bootstrap-current').text('Superhero'); $('#bootstrap-css').attr('href', 'includes/bootstrap/css/bootstrap.superhero.css');">Superhero</a></li>
        <li><a href="javascript:void(0);" onclick="$('#bootstrap-current').text('United'); $('#bootstrap-css').attr('href', 'includes/bootstrap/css/bootstrap.united.css');">United</a></li>
        <li class="divider"></li>
        <li><a href="http://bootswatch.com/" target="_blank">Themes by Bootswatch</a></li>
      </ul>
        </div>
  </div>
      <div id="switcher-jqueryui" class="hide"></div>
    </div>
<div class="container">
      <div class="modal hide" id="using" style="max-height: inherit;">
    <div class="modal-header"> <a class="close" data-dismiss="modal">×</a>
          <h3>Using Pines Notify</h3>
        </div>
    <div class="modal-body">
          <p> Pines Notify comes with the following files:<br />
        <br />
        <code>jquery.pnotify.js</code> &amp; <code>jquery.pnotify.min.js</code> (Minified) - The main JavaScript. <br />
        <code>jquery.pnotify.default.css</code> - The main stylesheet. <br />
        <code>jquery.pnotify.default.icons.css</code> - Use this to support Pines Icon styles. </p>
          <p> So here's how you'd include them all: </p>
          <pre class="prettyprint">&lt;script type="text/javascript" src="jquery.pnotify<em>.min</em>.js"&gt;&lt;/script&gt;
&lt;link href="jquery.pnotify.default.css" media="all" rel="stylesheet" type="text/css" /&gt;
&lt;!-- Include this file if you are using Pines Icons. --&gt;
&lt;link href="jquery.pnotify.default.icons.css" media="all" rel="stylesheet" type="text/css" /&gt;</pre>
          <p> You also need to include jQuery (1.4 or higher) and either Bootstrap CSS or a jQuery UI Theme. <small>If you want to use jQuery UI effect animations, you also need to include the jQuery UI JavaScript.</small> </p>
          <p> Now you can use Pines Notify like this: </p>
          <pre class="prettyprint">&lt;script type="text/javascript"&gt;
$(function(){
	$.pnotify({
		title: 'Regular Notice',
		text: 'Check me out! I\'m a notice.'
	});
});
&lt;/script&gt;</pre>
          <p> And if you choose to use jQuery UI for all your styling,
        include this line somewhere before your first notice: </p>
          <pre class="prettyprint">$.pnotify.defaults.styling = "jqueryui";</pre>
          <p> And if you don't want the history pull-down menu in the top
        corner, include this line somewhere before your first notice: </p>
          <pre class="prettyprint">$.pnotify.defaults.history = false;</pre>
          <p> All of the examples on this page provide source code with
        the "{}" button, <img style="margin-left: 3em;" src="includes/source-screen.png" alt="Source button screen shot." /> </p>
        </div>
    <div class="modal-footer"> <a href="#" class="btn" data-dismiss="modal">Ok, got it.</a> </div>
  </div>
      <div class="page-points">
    <div class="container-fluid">
          <div class="row-fluid dev-note" style="display: none;">
        <div class="span3">&nbsp;</div>
        <div class="span6 offset3">
              <div class="alert alert-error">
            <h3><i class="icon-exclamation-sign" style="position: relative; top: 3px;"></i> Caution warning danger attention!</h3>
            <p> This is the development site. It's a playground for
                  bleeding edge features and code that probably won't
                  work. You should head over to the <a href="http://pinesframework.org/pnotify/" class="btn btn-success">Main Site</a> </p>
          </div>
            </div>
      </div>
          <div class="row-fluid">
        <div class="span4">
              <div class="alert-block">
            <h3><i class="icon-asterisk" style="position: relative; top: 3px;"></i> Unobtrusive</h3>
            <p> Pines Notify can provide <strong>non-blocking</strong> notices.
                  This allows the user to click elements behind the notice without
                  even having to dismiss it. </p>
            <p> <a class="btn" data-toggle="modal" href="#feature-modal" >See All Features</a> </p>
          </div>
            </div>
      </div>
          <div class="row-fluid">
        <div class="span2">&nbsp;</div>
        <div class="span8 offset2"></div>
      </div>
          <div class="row-fluid stable-note" style="display: none;">
        <div class="span3">&nbsp;</div>
        <div class="span6 offset3">
              <div class="alert alert-success">
            <h3><i class="icon-info-sign" style="position: relative; top: 3px;"></i> Did you know?</h3>
            <p> This is the stable site. You can download code here that's
                  tested and proven to work. However, if you like to live
                  dangerously, you can also check out the <a href="http://sciactive.github.com/pnotify">development site</a>. </p>
          </div>
            </div>
      </div>
        </div>
  </div>
      <div class="modal hide fade" id="feature-modal">
    <div class="modal-header"> <a class="close" data-dismiss="modal">×</a>
          <h3>Pines Notify Features</h3>
        </div>
    <div class="modal-body">
          <ul class="unstyled">
        <li>Rich graphical features and effects.
              <ul>
            <li>jQuery UI, Bootstrap, Pines, and any other CSS based icons.</li>
            <li>Timed hiding with visual effects.</li>
            <li>Standard and custom effects.</li>
            <li>Add custom classes for individual notice styling.</li>
            <li>Variable opacity.</li>
            <li>Optional drop shadows.</li>
          </ul>
            </li>
        <li>Highly customizable UI.
              <ul>
            <li>Sticky (no automatic hiding) notices.</li>
            <li>Optional hide and sticker buttons.</li>
            <li>Non-blocking notices for less intrusive use.</li>
            <li>Three notification types: notice, info, and error.</li>
            <li>Stacks allow notice sets to stack independently.
                  <ul>
                <li>Control stack direction and push to top or bottom.</li>
              </ul>
                </li>
          </ul>
            </li>
        <li>Feature rich API.
              <ul>
            <li>Supports dynamically updating text, title, icon, type...</li>
            <li>Supports HTML (including forms) in title and text.
                  <ul>
                <li>Can also escape HTML to prevent XSS attack.</li>
              </ul>
                </li>
            <li>Callbacks for various events, which can cancel said events.</li>
            <li>History viewer allows user to review previous notices.</li>
          </ul>
            </li>
      </ul>
        </div>
    <div class="modal-footer"> <a data-dismiss="modal" class="btn">Close</a> </div>
  </div>
      <div class="well" style="clear: both;">
    <h2>Wait! Choose Your Styling:</h2>
    <div> Pines Notify offers two styling methods. Each uses a different
          CSS library.
          <div class="btn-toolbar">
        <div class="btn-group" data-toggle="buttons-radio">
              <button class="btn active" id="style-bootstrap">Bootstrap</button>
              <button class="btn" id="style-jqueryui">jQuery UI</button>
            </div>
        <button class="btn source" onclick="$.pnotify({
						title: 'Bootstrap Notice',
						text: 'Look at my beautiful styling! ^_^',
						styling: 'bootstrap'
					});
					$.pnotify({
						title: 'Bootstrap Info',
						text: 'Look at my beautiful styling! ^_^',
						type: 'info',
						styling: 'bootstrap'
					});
					$.pnotify({
						title: 'Bootstrap Success',
						text: 'Look at my beautiful styling! ^_^',
						type: 'success',
						styling: 'bootstrap'
					});
					$.pnotify({
						title: 'Bootstrap Error',
						text: 'Look at my beautiful styling! ^_^',
						type: 'error',
						styling: 'bootstrap'
					});
					$.pnotify({
						title: 'jQuery UI Notice',
						text: 'Look at my beautiful styling! ^_^',
						styling: 'jqueryui'
					});
					$.pnotify({
						title: 'jQuery UI Info',
						text: 'Look at my beautiful styling! ^_^',
						type: 'info',
						styling: 'jqueryui'
					});
					$.pnotify({
						title: 'jQuery UI Success',
						text: 'Look at my beautiful styling! ^_^',
						type: 'success',
						styling: 'jqueryui'
					});
					$.pnotify({
						title: 'jQuery UI Error',
						text: 'Look at my beautiful styling! ^_^',
						type: 'error',
						styling: 'jqueryui'
					});">Demo Each</button>
      </div>
        </div>
    <script type="text/javascript">
				$(function(){
					$("#style-bootstrap").click(function(){
						$.pnotify.defaults.styling = "bootstrap";
						$("#switcher-bootstrap").show();
						$("#switcher-jqueryui").hide();
						$.pnotify({
							title: "Styling Change",
							text: "From now on, notices will be styled with Twitter Bootstrap."
						});
					});
					$("#style-jqueryui").click(function(){
						$.pnotify.defaults.styling = "jqueryui";
						$("#switcher-jqueryui").show();
						$("#switcher-bootstrap").hide();
						$.pnotify({
							title: "Styling Change",
							text: "From now on, notices will be styled with jQuery UI."
						});
					});
				});
			</script> 
  </div>
      <div id="sections">
    <div id="demos-simple">
          <div class="page-header">
        <h2>Simple Demos</h2>
      </div>
          <div class="btn-toolbar well">
        <button class="btn source" onclick="$.pnotify({
						title: 'Regular Notice',
						text: 'Check me out! I\'m a notice.'
					});">Regular Notice</button>
        <button class="btn source" onclick="$.pnotify({
						title: 'Sticky Notice',
						text: 'Check me out! I\'m a sticky notice. You\'ll have to close me yourself.',
						hide: false
					});">Sticky Notice</button>
        <button class="btn source" onclick="$.pnotify({
						title: 'See Through Notice',
						text: 'No one ever pays attention to me. Why should they? I\'m practically invisible.',
						opacity: .8
					});">Transparent Notice</button>
        <button class="btn source" onclick="$.pnotify({
						title: 'No Shadow Notice',
						text: 'I don\'t have a shadow. (It\'s cause I\'m a vampire or something. Or is that reflections...)',
						shadow: false
					});">No Shadow Notice</button>
        <button class="btn source" onclick="$.pnotify('Check me out! I\'m a notice.');">Simple Notice</button>
        <button class="btn source" onclick="$.pnotify(Math.round(Math.random()*9999));">Number Notice</button>
        <br style="margin-bottom: 5px;" />
        <button class="btn source" onclick="$.pnotify({
						title: 'Pines Icon Notice',
						text: 'I have an icon that uses the Pines icon styles.',
						icon: 'picon picon-mail-unread-new'
					});">Pines Icon Notice</button>
        <button class="btn source" onclick="$.pnotify({
						title: 'jQuery UI Icon Notice',
						text: 'I have an icon that uses the jQuery UI icon styles.',
						icon: 'ui-icon ui-icon-mail-closed'
					});">jQuery UI Icon Notice</button>
        <button class="btn source" onclick="$.pnotify({
						title: 'Bootstrap Icon Notice',
						text: 'I have an icon that uses the Bootstrap icon styles.',
						icon: 'icon-envelope'
					});">Bootstrap Icon Notice</button>
        <button class="btn source" onclick="$.pnotify({
						title: 'No Icon Notice',
						text: 'I have no icon.',
						icon: false
					});">No Icon Notice</button>
      </div>
          <div class="btn-toolbar well">
        <button class="btn source" onclick="$.pnotify({
						title: 'New Thing',
						text: 'Just to let you know, something happened.',
						type: 'info'
					});">Regular Info</button>
        <button class="btn source" onclick="$.pnotify({
						title: 'Sticky Info',
						text: 'Sticky info, you know, like a newspaper covered in honey.',
						type: 'info',
						hide: false
					});">Sticky Info</button>
        <button class="btn source" onclick="$.pnotify({
						title: 'See Through Info',
						text: 'Not only does it not matter, but I don\'t even care if you see this info.',
						type: 'info',
						opacity: .8
					});">Transparent Info</button>
        <button class="btn source" onclick="$.pnotify({
						title: 'No Shadow Info',
						text: 'I don\'t have a shadow. (It\'s cause I\'m a vampire or something. Or is that reflections...)',
						type: 'info',
						shadow: false
					});">No Shadow Info</button>
        <br style="margin-bottom: 5px;" />
        <button class="btn source" onclick="$.pnotify({
						title: 'Pines Icon Info',
						text: 'Something is encrypted. Check out my icon, it shows that you\'re secure because our encryption uses padlocks.',
						type: 'info',
						icon: 'picon picon-document-encrypt'
					});">Pines Icon Info</button>
        <button class="btn source" onclick="$.pnotify({
						title: 'jQuery UI Icon Info',
						text: 'Something is encrypted. Check out my icon, it shows that you\'re secure because our encryption uses padlocks.',
						type: 'info',
						icon: 'ui-icon ui-icon-locked'
					});">jQuery UI Icon Info</button>
        <button class="btn source" onclick="$.pnotify({
						title: 'No Icon Info',
						text: 'I have no icon.',
						type: 'info',
						icon: false
					});">No Icon Info</button>
      </div>
          <div class="btn-toolbar well">
        <button class="btn source" onclick="$.pnotify({
						title: 'Regular Success',
						text: 'That thing that you were trying to do worked!',
						type: 'success'
					});">Regular Success</button>
        <button class="btn source" onclick="$.pnotify({
						title: 'Sticky Success',
						text: 'Sticky success... I\'m not even gonna make a joke.',
						type: 'success',
						hide: false
					});">Sticky Success</button>
        <button class="btn source" onclick="$.pnotify({
						title: 'See Through Success',
						text: 'He may be successful, but I see right through him.',
						type: 'success',
						opacity: .8
					});">Transparent Success</button>
        <button class="btn source" onclick="$.pnotify({
						title: 'No Shadow Success',
						text: 'I don\'t have a shadow. (It\'s cause I\'m a vampire or something. Or is that reflections...)',
						type: 'success',
						shadow: false
					});">No Shadow Success</button>
        <br style="margin-bottom: 5px;" />
        <button class="btn source" onclick="$.pnotify({
						title: 'Pines Icon Success',
						text: 'We reached the moon first! See, we planted a flag.',
						type: 'success',
						icon: 'picon picon-flag-green'
					});">Pines Icon Success</button>
        <button class="btn source" onclick="$.pnotify({
						title: 'jQuery UI Icon Success',
						text: 'We reached the moon first! See, we planted a flag.',
						type: 'success',
						icon: 'ui-icon ui-icon-flag'
					});">jQuery UI Icon Success</button>
        <button class="btn source" onclick="$.pnotify({
						title: 'No Icon Success',
						text: 'I have no icon.',
						type: 'success',
						icon: false
					});">No Icon Success</button>
      </div>
          <div class="btn-toolbar well">
        <button class="btn source" onclick="$.pnotify({
						title: 'Oh No!',
						text: 'Something terrible happened.',
						type: 'error'
					});">Regular Error</button>
        <button class="btn source" onclick="$.pnotify({
						title: 'Uh Oh!',
						text: 'Something really terrible happened. You really need to read this, so I won\'t close automatically.',
						type: 'error',
						hide: false
					});">Sticky Error</button>
        <button class="btn source" onclick="$.pnotify({
						title: 'See Through Error',
						text: 'There\'s an error, but no one cares.',
						type: 'error',
						opacity: .8
					});">Transparent Error</button>
        <button class="btn source" onclick="$.pnotify({
						title: 'No Shadow Error',
						text: 'I don\'t have a shadow. (It\'s cause I\'m a vampire or something. Or is that reflections...)',
						type: 'error',
						shadow: false
					});">No Shadow Error</button>
        <br style="margin-bottom: 5px;" />
        <button class="btn source" onclick="$.pnotify({
						title: 'Pines Icon Error',
						text: 'Oh no. Something\'s wrong with your network, and I\'m showing you visually using an appropriate icon to indicate the type of error that has occured. You know, network.',
						type: 'error',
						icon: 'picon picon-network-wireless'
					});">Pines Icon Error</button>
        <button class="btn source" onclick="$.pnotify({
						title: 'jQuery UI Icon Error',
						text: 'Oh no. Something\'s wrong with your network, and I\'m showing you visually using an appropriate icon to indicate the type of error that has occured. You know, network.',
						type: 'error',
						icon: 'ui-icon ui-icon-signal-diag'
					});">jQuery UI Icon Error</button>
        <button class="btn source" onclick="$.pnotify({
						title: 'No Icon Error',
						text: 'I have no icon.',
						type: 'error',
						icon: false
					});">No Icon Error</button>
      </div>
        </div>
    <div id="demos-advanced">
          <div class="page-header">
        <h2>Advanced Demos</h2>
      </div>
          <div class="btn-toolbar well">
        <button class="btn source" onclick="$.pnotify({
						title: 'No Sticky Button Notice',
						text: 'Check me out! I\'m a sticky notice with no unsticky button. You\'ll have to close me yourself.',
						hide: false,
						sticker: false
					});">No Sticky Button</button>
        <button class="btn source" onclick="$.pnotify({
						title: 'Permanent Buttons Notice',
						text: 'My buttons are really lonely, so they\'re gonna hang out with us.',
						closer_hover: false,
						sticker_hover: false
					});">Permanent Buttons</button>
        <button class="btn source" onclick="$.pnotify({
						title: 'No History Notice',
						text: 'I\'m not part of the notice history, so if you redisplay the last message, it won\'t be me.',
						history: false
					});">No History Notice</button>
        <button class="btn source" onclick="$.pnotify({
						title: 'No Mouse Reset Notice',
						text: 'I don\'t care if you move your mouse over me, I\'ll disappear when I want.',
						mouse_reset: false
					});">No Mouse Reset Notice</button>
        <button class="btn source" onclick="$.pnotify({
						title: 'No Rounded Corners Notice',
						text: 'Warning: Contains sharp objects. Not suitable for browsers under the age of CSS3.',
						cornerclass: 'ui-pnotify-sharp'
					});">No Rounded Corners</button>
        <br style="margin-bottom: 5px;" />
        <button class="btn source" onclick="$.pnotify({
						title: 'Fast Fading Notice',
						text: 'I fade in and out really quickly.',
						animate_speed: 'fast'
					});">Fast Fading Notice</button>
        <button class="btn source" onclick="$.pnotify({
						title: 'No Effect Notice',
						text: 'I don\'t even bother to animate. I\'m too cool for that.',
						animation: 'none'
					});">No Effect Notice</button>
        <button class="btn source" onclick="fake_load();">Pretend Loader</button>
        <button class="btn source" onclick="dyn_notice();">Dynamic Notice</button>
        <button class="btn source" onclick="$.pnotify({
						title: 'Notice',
						text: 'Right now I\'m a notice.',
						before_close: function(pnotify){
							pnotify.pnotify({
								title: 'Error',
								text: 'Uh oh. Now I\'ve become an error.',
								type: 'error',
								before_close: function(pnotify){
									pnotify.pnotify({
										title: 'Success',
										text: 'I fixed the error!',
										type: 'success',
										before_close: function(pnotify){
											pnotify.pnotify({
												title: 'Info',
												text: 'Everything\'s cool now.',
												type: 'info',
												before_close: null
											});
											pnotify.pnotify_queue_remove();
											pnotify.effect('bounce');
											return false;
										}
									});
									pnotify.pnotify_queue_remove();
									pnotify.effect('bounce');
									return false;
								}
							});
							pnotify.pnotify_queue_remove();
							pnotify.effect('bounce');
							return false;
						}
					});">Notice to Error to Success to Info</button>
        <br style="margin-bottom: 5px;" />
        <button class="btn source" onclick="if (permanotice) {
						permanotice.pnotify_display();
					} else {
						permanotice = $.pnotify({
							title: 'Now Look Here',
							text: 'There\'s something you need to know, and I won\'t go away until you come to grips with it.',
							nonblock: true,
							hide: false,
							closer: false,
							sticker: false
						});
					}">Permanotice</button>
        <button class="btn source" onclick="if (permanotice.pnotify_remove) permanotice.pnotify_remove();">Remove Permanotice</button>
        <button class="btn source" onclick="$.pnotify({
						title: 'Non-Blocking Notice',
						text: 'I\'m a special kind of notice called &quot;non-blocking&quot;. When you hover over me I\'ll fade to show the elements underneath. Feel free to click any of them just like I wasn\'t even here.\n\nNote: HTML links don\'t trigger in some browsers, due to security settings.',
						nonblock: true,
						nonblock_opacity: .2
					});">Non-Blocking Notice</button>
        <button class="btn source" onclick="var notice = $.pnotify({
						text: $('#form_notice').html(),
						icon: false,
						width: 'auto',
						hide: false,
						closer: false,
						sticker: false,
						insert_brs: false
					});
					notice.find('form.pf-form').submit(function(){
						var username = $(this).find('input[name=username]').val();
						if (!username) {
							alert('Please provide a username.');
							return false;
						}
						notice.pnotify({
							title: 'Welcome',
							text: 'Successfully logged in as '+username,
							icon: true,
							width: $.pnotify.defaults.width,
							hide: true,
							closer: true,
							sticker: true,
							type: 'success'
						});
						return false;
					});">Form Notice</button>
        <div id="form_notice" style="display: none;">
              <form class="pf-form pform_custom" action="" method="post">
            <div class="pf-element pf-heading">
                  <h3>Login to Continue</h3>
                  <p>Just an example.</p>
                </div>
            <div class="pf-element">
                  <label> <span class="pf-label">Username</span>
                <input class="pf-field" type="text" name="username" />
              </label>
                </div>
            <div class="pf-element">
                  <label> <span class="pf-label">Password</span>
                <input class="pf-field" type="password" name="password" />
              </label>
                </div>
            <div class="pf-element">
                  <label> <span class="pf-label">Remember Me</span> <span class="pf-note">Lasts for 2 weeks.</span>
                <input class="pf-field" type="checkbox" name="remember" />
              </label>
                </div>
            <div class="pf-element pf-buttons pf-centered">
                  <input class="pf-button btn btn-primary" type="submit" name="submit" value="Submit" />
                  <input class="pf-button btn" type="reset" name="reset" value="Reset" />
                </div>
          </form>
            </div>
        <button class="btn source" onclick="var dont_alert = function(){};
					$.pnotify({
						title: 'I\'m Here',
						text: 'I have a callback for each of my events. I\'ll call all my callbacks while I change states.',
						before_init: function(opts){
							var source_note = 'Return false to cancel the notice.';
							alert('I\'m called before the notice initializes. I\'m passed the options used to make the notice. I can modify them. Watch me replace the word callback with tire iron!');
							opts.text = opts.text.replace(/callback/g, 'tire iron');
						},
						after_init: function(pnotify){
							alert('I\'m called after the notice initializes. I\'m passed the pnotify object for the current notice: '+pnotify+'\n\nThere are more callbacks you can assign, but this is the last notice you\'ll see. Check the code to see them all.');
						},
						before_open: function(pnotify){
							var source_note = 'Return false to cancel opening.';
							dont_alert('I\'m called before the notice opens. I\'m passed the pnotify object for the current notice: '+pnotify);
						},
						after_open: function(pnotify){
							dont_alert('I\'m called after the notice opens. I\'m passed the pnotify object for the current notice: '+pnotify);
						},
						before_close: function(pnotify){
							var source_note = 'Return false to cancel close. Use pnotify.pnotify_queue_remove() to set the removal timer again.';
							dont_alert('I\'m called before the notice closes. I\'m passed the pnotify object for the current notice: '+pnotify);
						},
						after_close: function(pnotify){
							var source_note = 'Return false to cancel removal from the DOM.';
							dont_alert('I\'m called after the notice closes. I\'m passed the pnotify object for the current notice: '+pnotify);
						}
					});">Notice with Callbacks</button>
        <br style="margin-bottom: 5px;" />
        <button class="btn source" onclick="var notice = $.pnotify({
						title: 'Click Notice',
						text: 'I wish someone would click me.'
					}).click(function(e){
						if ($(e.target).is('.ui-pnotify-closer *, .ui-pnotify-sticker *'))
							return;
						notice.pnotify({type: 'success', text: 'Yay, you clicked me!&lt;div style=&quot;text-align: center;&quot;&gt;&lt;img src=&quot;http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Happy_smiley_face.png/240px-Happy_smiley_face.png&quot; /&gt;&lt;/div&gt;'});
					});">Click Notice</button>
        <button class="btn source" onclick="$.pnotify({
						title: 'Big Notice',
						text: 'Check me out! I\'m tall and wide, even though my text isn\'t.',
						width: '500px',
						min_height: '400px'
					});">Big Notice</button>
        <button class="btn source" onclick="show_rich();">Rich Notice</button>
        <button class="btn source" onclick="$.pnotify({
						title: '&lt;em&gt;Escaped Notice&lt;/em&gt;',
						title_escape: true,
						text: $('#evil_html').html(),
						text_escape: true
					});">Escaped Notice</button>
        <div id="evil_html" style="display: none;">
              <div>As you can see, I don't allow HTML in my content.</div>
              <div>This prevents things like cross site scripting attacks:</div>
              <script type="text/javascript">
							(function(){
								// Here would be the XSS attack.
							})()
						</script> 
            </div>
        <button class="btn source" onclick="$.pnotify({
						title: 'Custom Styling',
						text: 'I have an additional class that\'s used to give me special styling. I always wanted to be pretty.',
						addclass: 'custom',
						icon: 'picon picon-32 picon-fill-color',
						opacity: .8,
						nonblock: true,
						nonblock_opacity: .2
					});">Custom Styled Notice</button>
        &lt; <a data-toggle="modal" href="#growl">This is how you make it look like Apple Growl.</a>
        <div class="modal hide" id="growl" style="max-height: inherit;">
              <div class="modal-header"> <a class="close" data-dismiss="modal">×</a>
            <h3>Styling Notices Like Growl</h3>
          </div>
              <div class="modal-body">
            <p> To custom style a notice, you need to use a
                  class. For this example, we'll use "<strong>custom</strong>". </p>
            <p> Here's some CSS to make custom notices look like
                  Apple Growl: </p>
            <pre class="prettyprint lang-css" style="min-width: 100%;">.ui-pnotify<strong>.custom</strong> .ui-pnotify-container {
	background-color: #404040 !important;
	background-image: none !important;
	border: none !important;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
.ui-pnotify<strong>.custom</strong> .ui-pnotify-title, .ui-pnotify<strong>.custom</strong> .ui-pnotify-text {
	font-family: Arial, Helvetica, sans-serif !important;
	text-shadow: 2px 2px 3px black !important;
	font-size: 10pt !important;
	color: #FFF !important;
	padding-left: 50px !important;
	line-height: 1 !important;
	text-rendering: geometricPrecision !important;
}
.ui-pnotify<strong>.custom</strong> .ui-pnotify-title {
	font-weight: bold;
}
.ui-pnotify<strong>.custom</strong> .ui-pnotify-icon {
	float: left;
}
.ui-pnotify<strong>.custom</strong> .picon {
	margin: 3px;
	width: 33px;
	height: 33px;
}</pre>
            <p> And here's the JavaScript to use this styling: </p>
            <pre class="prettyprint" style="min-width: 100%;">$.pnotify({
	title: 'Custom Styling',
	text: 'I have an additional class that\'s used to give me special styling. I always wanted to be pretty.',
	<strong>addclass: 'custom'</strong>,
	icon: 'picon picon-32 picon-fill-color',
	opacity: .8,
	nonblock: true,
	nonblock_opacity: .2
});</pre>
          </div>
              <div class="modal-footer"> <a href="#" class="btn" data-dismiss="modal">Ok, got it.</a> </div>
            </div>
      </div>
          <div class="btn-toolbar well">
        <h4> Examples of Custom Stacks
              <button class="btn source" style="margin-left: 10px;" onclick="show_stack_info();">What are stacks?</button>
            </h4>
        <button class="btn source" onclick="show_stack_topleft('notice');">Notice</button>
        <button class="btn source" onclick="show_stack_topleft('info');">Info</button>
        <button class="btn source" onclick="show_stack_topleft('success');">Success</button>
        <button class="btn source" onclick="show_stack_topleft('error');">Error</button>
        Top Left. Moves down, then right. Pushes to stack top. <br style="margin-bottom: 5px;" />
        <button class="btn source" onclick="show_stack_bottomleft('notice');">Notice</button>
        <button class="btn source" onclick="show_stack_bottomleft('info');">Info</button>
        <button class="btn source" onclick="show_stack_bottomleft('success');">Success</button>
        <button class="btn source" onclick="show_stack_bottomleft('error');">Error</button>
        Bottom Left. Moves right, then up. Pushes to stack top. <br style="margin-bottom: 5px;" />
        <button class="btn source" onclick="show_stack_bottomright('notice');">Notice</button>
        <button class="btn source" onclick="show_stack_bottomright('info');">Info</button>
        <button class="btn source" onclick="show_stack_bottomright('success');">Success</button>
        <button class="btn source" onclick="show_stack_bottomright('error');">Error</button>
        Bottom Right. Moves up, then left. Pushes to stack bottom. <br style="margin-bottom: 5px;" />
        <button class="btn source" onclick="show_stack_custom('notice');">Notice</button>
        <button class="btn source" onclick="show_stack_custom('info');">Info</button>
        <button class="btn source" onclick="show_stack_custom('success');">Success</button>
        <button class="btn source" onclick="show_stack_custom('error');">Error</button>
        Custom. Moves right, then down. Pushes to stack bottom. <br style="margin-bottom: 5px;" />
        <button class="btn source" onclick="show_stack_custom2('notice');">Notice</button>
        <button class="btn source" onclick="show_stack_custom2('info');">Info</button>
        <button class="btn source" onclick="show_stack_custom2('success');">Success</button>
        <button class="btn source" onclick="show_stack_custom2('error');">Error</button>
        Custom. Moves left, then up. Pushes to stack top. <br style="margin-bottom: 5px;" />
        <h4>Really Different Stacks</h4>
        <button class="btn source" onclick="show_stack_bar_top('notice');">Notice</button>
        <button class="btn source" onclick="show_stack_bar_top('info');">Info</button>
        <button class="btn source" onclick="show_stack_bar_top('success');">Success</button>
        <button class="btn source" onclick="show_stack_bar_top('error');">Error</button>
        Top bar style. (Like Old Microsoft Notification Bars.) Moves down, then right. Pushes to stack top. <br style="margin-bottom: 5px;" />
        <button class="btn source" onclick="show_stack_bar_bottom('notice');">Notice</button>
        <button class="btn source" onclick="show_stack_bar_bottom('info');">Info</button>
        <button class="btn source" onclick="show_stack_bar_bottom('success');">Success</button>
        <button class="btn source" onclick="show_stack_bar_bottom('error');">Error</button>
        Bottom bar style. (Like New Microsoft Notification Bars.) Moves up, then right. Pushes to stack bottom. <br style="margin-bottom: 5px;" />
        <button class="btn source" onmouseover="tooltip.pnotify_display();" onmousemove="tooltip.css({'top': event.clientY+12, 'left': event.clientX+12});" onmouseout="tooltip.pnotify_remove();">Hover Over Me</button>
        Tooltip </div>
          <div class="btn-toolbar well">
        <h4>Timer</h4>
        Current Timer: <span id="timer" style="font-family: monospace;"></span> 
        <script type="text/javascript">
						function update_timer_display() {
							$("#timer").text(($.pnotify.defaults.delay/1000)+" seconds");
						}
						$(function(){
							update_timer_display();
						});
					</script> 
        <br style="margin-bottom: 3px;" />
        <button class="btn source" onclick="$.pnotify.defaults.delay ? (function(){$.pnotify.defaults.delay -= 500; update_timer_display();}()) : (alert('Timer is already at zero.'))">Lower Timer</button>
        <button class="btn source" onclick="(function(){$.pnotify.defaults.delay += 500; update_timer_display();}())">Raise Timer</button>
        <br style="margin-bottom: 5px;" />
        <h4>Benchmarking</h4>
        <button class="btn source" onclick="for (i=0; i!=10; i++) {$.pnotify({
						title: 'Regular Notice',
						text: 'Check me out! I\'m a notice.'
					});}">10 Notices</button>
        <button class="btn source" onclick="for (i=0; i!=100; i++) {$.pnotify({
						title: 'Regular Notice',
						text: 'Check me out! I\'m a notice.'
					});}">100 Notices (Careful)</button>
        <button class="btn source" onclick="timed_notices(100);">Time 100 Notices</button>
        <button class="btn source" onclick="timed_notices(500);">Time 500 Notices</button>
        <button class="btn source" onclick="timed_notices(1000);">Time 1000 Notices (Dangerous)</button>
        <br style="margin-bottom: 5px;" />
        <button class="btn source" onclick="$.pnotify_remove_all();">Remove All Notices</button>
      </div>
          <div class="btn-toolbar well">
        <h4>Effects built in to jQuery</h4>
        <button class="btn source" onclick="$.pnotify({
						title: 'Show Effect',
						text: 'I use a different effect.',
						animation: 'show'
					});">Show</button>
        <button class="btn source" onclick="$.pnotify({
						title: 'Fade Effect',
						text: 'I use a different effect.',
						animation: 'fade'
					});">Fade</button>
        <button class="btn source" onclick="$.pnotify({
						title: 'Slide Effect',
						text: 'I use a different effect.',
						animation: 'slide'
					});">Slide</button>
        <button class="btn source" onclick="$.pnotify({
						title: 'Show and Slide Effect',
						text: 'I use a different effect.',
						animation: {effect_in: 'show', effect_out: 'slide'}
					});">Different In and Out</button>
        <br style="margin-bottom: 5px;" />
        <h4>Effects from jQuery UI</h4>
        Presets:
        <button class="btn source" onclick="$('#ui_effect_in').val('scale'); $('#ui_easing_in').val('easeOutElastic'); $('#ui_effect_out').val('same'); $('#ui_easing_out').val('same'); $('#ui_speed').val('700'); $('#ui_button').click();">Bouncy Fun</button>
        <button class="btn source" onclick="$('#ui_effect_in').val('drop'); $('#ui_easing_in').val('easeOutBounce'); $('#ui_effect_out').val('same'); $('#ui_easing_out').val('easeOutCubic'); $('#ui_speed').val('700'); $('#ui_button').click();">Toss In</button>
        <button class="btn source" onclick="$('#ui_effect_in').val('puff'); $('#ui_easing_in').val('easeOutBack'); $('#ui_effect_out').val('same'); $('#ui_easing_out').val('easeInBack'); $('#ui_speed').val('1000'); $('#ui_button').click();">Gentle Puff</button>
        <br />
        <br />
        <span style="display: inline-block; width: 30px;">In:</span> Effect
        <select id="ui_effect_in">
              <option value="blind">Blind</option>
              <option value="bounce">Bounce</option>
              <option value="clip">Clip</option>
              <option value="drop">Drop</option>
              <option value="explode">Explode</option>
              <option value="fold">Fold</option>
              <option value="puff">Puff</option>
              <option value="scale">Scale</option>
              <option value="slide">Slide</option>
            </select>
        Easing
        <select id="ui_easing_in">
              <option value="linear">Linear</option>
              <option value="swing">Swing</option>
              <option value="easeInQuad">easeInQuad</option>
              <option value="easeOutQuad">easeOutQuad</option>
              <option value="easeInOutQuad">easeInOutQuad</option>
              <option value="easeInCubic">easeInCubic</option>
              <option value="easeOutCubic">easeOutCubic</option>
              <option value="easeInOutCubic">easeInOutCubic</option>
              <option value="easeInQuart">easeInQuart</option>
              <option value="easeOutQuart">easeOutQuart</option>
              <option value="easeInOutQuart">easeInOutQuart</option>
              <option value="easeInQuint">easeInQuint</option>
              <option value="easeOutQuint">easeOutQuint</option>
              <option value="easeInOutQuint">easeInOutQuint</option>
              <option value="easeInSine">easeInSine</option>
              <option value="easeOutSine">easeOutSine</option>
              <option value="easeInOutSine">easeInOutSine</option>
              <option value="easeInExpo">easeInExpo</option>
              <option value="easeOutExpo">easeOutExpo</option>
              <option value="easeInOutExpo">easeInOutExpo</option>
              <option value="easeInCirc">easeInCirc</option>
              <option value="easeOutCirc">easeOutCirc</option>
              <option value="easeInOutCirc">easeInOutCirc</option>
              <option value="easeInElastic">easeInElastic</option>
              <option value="easeOutElastic">easeOutElastic</option>
              <option value="easeInOutElastic">easeInOutElastic</option>
              <option value="easeInBack">easeInBack</option>
              <option value="easeOutBack">easeOutBack</option>
              <option value="easeInOutBack">easeInOutBack</option>
              <option value="easeInBounce">easeInBounce</option>
              <option value="easeOutBounce">easeOutBounce</option>
              <option value="easeInOutBounce">easeInOutBounce</option>
            </select>
        <br style="margin-bottom: 4px;" />
        <span style="display: inline-block; width: 30px;">Out:</span> Effect
        <select id="ui_effect_out">
              <option value="same">Same</option>
              <option value="blind">Blind</option>
              <option value="bounce">Bounce</option>
              <option value="clip">Clip</option>
              <option value="drop">Drop</option>
              <option value="explode">Explode</option>
              <option value="fold">Fold</option>
              <option value="puff">Puff</option>
              <option value="scale">Scale</option>
              <option value="slide">Slide</option>
            </select>
        Easing
        <select id="ui_easing_out">
              <option value="same">Same</option>
              <option value="linear">Linear</option>
              <option value="swing">Swing</option>
              <option value="easeInQuad">easeInQuad</option>
              <option value="easeOutQuad">easeOutQuad</option>
              <option value="easeInOutQuad">easeInOutQuad</option>
              <option value="easeInCubic">easeInCubic</option>
              <option value="easeOutCubic">easeOutCubic</option>
              <option value="easeInOutCubic">easeInOutCubic</option>
              <option value="easeInQuart">easeInQuart</option>
              <option value="easeOutQuart">easeOutQuart</option>
              <option value="easeInOutQuart">easeInOutQuart</option>
              <option value="easeInQuint">easeInQuint</option>
              <option value="easeOutQuint">easeOutQuint</option>
              <option value="easeInOutQuint">easeInOutQuint</option>
              <option value="easeInSine">easeInSine</option>
              <option value="easeOutSine">easeOutSine</option>
              <option value="easeInOutSine">easeInOutSine</option>
              <option value="easeInExpo">easeInExpo</option>
              <option value="easeOutExpo">easeOutExpo</option>
              <option value="easeInOutExpo">easeInOutExpo</option>
              <option value="easeInCirc">easeInCirc</option>
              <option value="easeOutCirc">easeOutCirc</option>
              <option value="easeInOutCirc">easeInOutCirc</option>
              <option value="easeInElastic">easeInElastic</option>
              <option value="easeOutElastic">easeOutElastic</option>
              <option value="easeInOutElastic">easeInOutElastic</option>
              <option value="easeInBack">easeInBack</option>
              <option value="easeOutBack">easeOutBack</option>
              <option value="easeInOutBack">easeInOutBack</option>
              <option value="easeInBounce">easeInBounce</option>
              <option value="easeOutBounce">easeOutBounce</option>
              <option value="easeInOutBounce">easeInOutBounce</option>
            </select>
        <br style="margin-bottom: 4px;" />
        Speed (ms):
        <input type="text" size="8" id="ui_speed" value="600" />
        <button class="btn source" style="margin-left: 2em;" onclick="
						var effect_in = $('#ui_effect_in').val(),
							easing_in = $('#ui_easing_in').val(),
							effect_out = $('#ui_effect_out').val(),
							easing_out = $('#ui_easing_out').val(),
							speed = $('#ui_speed').val();
						if (effect_out == 'same')
							effect_out = effect_in;
						if (easing_out == 'same')
							easing_out = easing_in;
						if (speed.match(/^\d+$/))
							speed = parseInt(speed);
						var options_in = {easing: easing_in},
							options_out = {easing: easing_out};
						if (effect_in == 'scale')
							options_in.percent = 100;
						if (effect_out == 'scale')
							options_out.percent = 0;
						$.pnotify({
							title: 'jQuery UI Effect',
							text: 'I use an effect from jQuery UI.',
							animate_speed: speed,
							animation: {
								'effect_in': effect_in,
								'options_in': options_in,
								'effect_out': effect_out,
								'options_out': options_out
							}
						});
					" id="ui_button">Notify!</button>
        <br style="margin-bottom: 5px;" />
        <h4>Custom Functions (Uses CSS3)</h4>
        <button class="btn source" onclick="$.pnotify({
						title: 'Custom Function',
						text: 'I use a different effect.',
						animation: function(status, callback, pnotify){
							var source_note = 'Always call the callback when the animation completes.';
							var cur_angle = 0,
								cur_opacity_scale = 0;
							if (status == 'out')
								cur_opacity_scale = 1;
							var timer = setInterval(function(){
								cur_angle += 10;
								if (cur_angle == 360) {
									cur_angle = 0;
									cur_opacity_scale = 1;
									if (status == 'out')
										cur_opacity_scale = 0;
									clearInterval(timer);
								} else {
									cur_opacity_scale = cur_angle / 360;
									if (status == 'out')
										cur_opacity_scale = 1 - cur_opacity_scale;
								}
								pnotify.css({
									'-moz-transform': ('rotate('+cur_angle+'deg) scale('+cur_opacity_scale+')'),
									'-webkit-transform': ('rotate('+cur_angle+'deg) scale('+cur_opacity_scale+')'),
									'-o-transform': ('rotate('+cur_angle+'deg) scale('+cur_opacity_scale+')'),
									'-ms-transform': ('rotate('+cur_angle+'deg) scale('+cur_opacity_scale+')'),
									'filter': ('progid:DXImageTransform.Microsoft.BasicImage(rotation='+(cur_angle / 360 * 4)+')')
								}).fadeTo(0, cur_opacity_scale);
								if (cur_angle == 0) {
									if (status == 'out')
											pnotify.hide();
									callback();
								}
							}, 20);
						}
					});">One Function</button>
        <button class="btn source" onclick="$.pnotify({
						title: 'Custom Functions',
						text: 'I use a different effect.',
						animation: {effect_in: function(status, callback, pnotify){
							var source_note = 'Always call the callback when the animation completes.';
							var cur_angle = 0,
								cur_opacity_scale = 0;
							var timer = setInterval(function(){
								cur_angle += 10;
								if (cur_angle == 360) {
									cur_angle = 0;
									cur_opacity_scale = 1;
									clearInterval(timer);
								} else {
									cur_opacity_scale = cur_angle / 360;
								}
								pnotify.css({
									'-moz-transform': ('rotate('+cur_angle+'deg) scale('+cur_opacity_scale+')'),
									'-webkit-transform': ('rotate('+cur_angle+'deg) scale('+cur_opacity_scale+')'),
									'-o-transform': ('rotate('+cur_angle+'deg) scale('+cur_opacity_scale+')'),
									'-ms-transform': ('rotate('+cur_angle+'deg) scale('+cur_opacity_scale+')'),
									'filter': ('progid:DXImageTransform.Microsoft.BasicImage(rotation='+(cur_angle / 360 * 4)+')')
								}).fadeTo(0, cur_opacity_scale);
								if (cur_angle == 0)
									callback();
							}, 20);
						}, effect_out: function(status, callback, pnotify){
							var source_note = 'Always call the callback when the animation completes.';
							var cur_angle = 0,
								cur_opacity_scale = 1;
							var timer = setInterval(function(){
								cur_angle += 10;
								if (cur_angle == 360) {
									cur_angle = 0;
									cur_opacity_scale = 0;
									clearInterval(timer);
								} else {
									cur_opacity_scale = cur_angle / 360;
									cur_opacity_scale = 1 - cur_opacity_scale;
								}
								pnotify.css({
									'-moz-transform': ('rotate('+cur_angle+'deg) scale('+cur_opacity_scale+')'),
									'-webkit-transform': ('rotate('+cur_angle+'deg) scale('+cur_opacity_scale+')'),
									'-o-transform': ('rotate('+cur_angle+'deg) scale('+cur_opacity_scale+')'),
									'-ms-transform': ('rotate('+cur_angle+'deg) scale('+cur_opacity_scale+')'),
									'filter': ('progid:DXImageTransform.Microsoft.BasicImage(rotation='+(cur_angle / 360 * 4)+')')
								}).fadeTo(0, cur_opacity_scale);
								if (cur_angle == 0) {
									pnotify.hide();
									callback();
								}
							}, 20);
						}}
					});">Two Functions</button>
      </div>
          <div class="btn-toolbar well">
        <h4>Consuming the Alert Function</h4>
        This isn't really a feature of Pines Notify, but it's cool.
        <ol>
              <li style="margin-bottom: 1em;">
            <button class="btn source" onclick="alert('I\'m a standard alert, called with alert().')">Display a JavaScript Alert</button>
          </li>
              <li style="margin-bottom: 1em;">
            <button class="btn source" onclick="consume_alert();">Consume alert()</button>
          </li>
              <li style="margin-bottom: 1em;">Repeat step 1.</li>
              <li style="margin-bottom: 1em;">
            <button class="btn source" onclick="release_alert();">Release alert()</button>
          </li>
            </ol>
      </div>
        </div>
  </div>
      <p id="copyright">&copy; 2011-2012 SciActive.com. All Rights Reserved.</p>
    </div>
</body>
</html>